<template>
    <div class="title">课程标准</div>
    <div class="option">
        <div class="option">
            <span>开课院系：</span>
            <el-select
                v-model="value"
                :empty-values="[null, undefined]"
                :value-on-clear="null"
                placeholder="Select"
                style="width: 240px"
                @change="(val: any) => selectionChange(val)"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <span style="margin-left: 20px">课程编号：</span>
            <el-input v-model="inputCourseId" style="width: 240px"/>
            <span style="margin-left: 20px">课程名称：</span>
            <el-input v-model="inputCourseName" style="width: 240px"/>
            <el-button style="margin-left: 20px" type="primary" @click="handleSearch">查询</el-button>
        </div>
    </div>
    <div class="list">
        <span>我的课程：</span>
        <template v-if="isListLoad">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="departmentName" label="开课单位" width="230"/>
                <el-table-column prop="courseId" label="课程编号" width="180"/>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="courseHour" label="总学时"/>
                <el-table-column prop="credits" label="学分"/>
                <el-table-column prop="type" label="课程类别"/>
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleBrowse(scope.row.courseId)">
                            查看课程标准
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <VuePdfEmbed v-if="isPDFLoad" annotation-layer text-layer
                 :source="pdfSource" @rendering-failed="handleLoadFail"/>
</template>

<script setup lang="ts">

import VuePdfEmbed from 'vue-pdf-embed'
// essential styles
import 'vue-pdf-embed/dist/style/index.css'
// optional styles
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getStudentCourseStandard, searchStudentCourseStandard} from "@/service/student/student.service";

const inputCourseId = ref('')
const inputCourseName = ref('')
const isPDFLoad = ref(false)
const value = ref('')
const options = ref([
    {
        value: '',
        label: '全部',
    }])
const selectDepartment = ref('')
const isListLoad = ref(false)
const tableData = ref([])
var pdfSource: string

onMounted(() => {
    getStudentCourseStandard(selectDepartment.value, inputCourseId.value, inputCourseName.value, (data: any) => {
        // 系部信息
        let departmentList = data.departmentDto.departmentList;
        for (const department of departmentList) {
            options.value.push({
                value: department.departmentId,
                label: `[${department.departmentId}]${department.name}`,
            })
        }
        let courseIdList: string[] = ['']
        // 当前学生选课列表
        let studentCourseStandardList = data.studentCourseStandardList
        for (const studentCourseStandard of studentCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(studentCourseStandard.courseId)) {
                courseIdList.push(studentCourseStandard.courseId)
                tableData.value.push(studentCourseStandard)
            }
        }
    })
    
    isListLoad.value = true
})

function handleLoadFail() {
    ElMessage({
        message: "操作有误",
        type: "error",
        duration: 2000
    });
}

/**
 * 选择院系
 * @param val
 */
function selectionChange(val: any) {
    selectDepartment.value = val
}

/**
 * 根据院系/课程编号/课程名称查询课程标准
 */
function handleSearch() {
    isListLoad.value = false
    isPDFLoad.value = false
    let courseName: any
    let courseId: any
    let departmentId: any
    if (inputCourseName.value == '') {
        courseName = null
    } else {
        courseName = inputCourseName.value
    }
    if (inputCourseId.value == '') {
        courseId = null
    } else {
        courseId = inputCourseId.value
    }
    if (selectDepartment.value == '') {
        departmentId = null
    } else {
        departmentId = selectDepartment.value
    }
    
    getStudentCourseStandard(departmentId, courseId, courseName, (data: any) => {
        // 系部信息
        let departmentList = data.departmentDto.departmentList;
        for (const department of departmentList) {
            options.value.push({
                value: department.departmentId,
                label: `[${department.departmentId}]${department.name}`,
            })
        }
        let courseIdList: string[] = ['']
        tableData.value = []
        // 当前学生选课列表
        let studentCourseStandardList = data.studentCourseStandardList
        for (const studentCourseStandard of studentCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(studentCourseStandard.courseId)) {
                courseIdList.push(studentCourseStandard.courseId)
                tableData.value.push(studentCourseStandard)
            }
        }
        isListLoad.value = true
    })
    
}

function handleBrowse(courseId: any) {
    isPDFLoad.value = false
    console.log(courseId)
    pdfSource = searchStudentCourseStandard(courseId)
    isPDFLoad.value = true
}
</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>